<template>
	<view class="finishList">
		<navBar isBack backColor="#fff" title="订单列表" color="#fff" background="transparent"></navBar>
		<view class="fL_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
		</view>
		<view class="fL_listBtn">
			<!-- <view :class="listStatus==true?'fL_listBtnOk':'fL_listBtnActive'" @click="_listOk">
				已成交
				<view class="fL_listBtnborder" v-if="listStatus"></view>
			</view>
			<view :class="listStatus==false?'fL_listBtnOk':'fL_listBtnActive'" @click="_listNo">
				未成交
				<view class="fL_listBtnborder" v-show="!listStatus"></view>
			</view> -->
			<view :class="btnIndex==index?'activeBtn':'fL_allBtn'" v-for="(item,index) in listBtn" :data-index="index" @click="_navBtn">
				{{item}}
				<view class="fL_listBtnborder" v-if="btnIndex==index"></view>
			</view>
		</view>
		
		<!-- 所有列表 -->
		<view class="fL_allList">
			<view class="fL_ListItem" v-for="(item,index) in finishList" @click="toGuideList(item.single_id)">
				<!-- 用户信息 -->
				<view class="fL_userInfo">
					<view class="fL_userLeft">
						<view class="fL_userImg">
							<image :src="item.headimg" mode=""></image>
							<image :src="item.guideRankImg" mode=""></image>
						</view>
						{{item.username}}
					</view>
					<span>{{item.pay_status==1?'待支付':item.pay_status==2?'支付成功':item.pay_status==3?'已关闭':''}}</span><!-- 订单状态 -->
				</view>
				<!-- 订单信息 -->
				<view class="fL_orderInfo">
					<view class="fL_orderTop">
						<view>
							生成清单
							<span>清单价格</span>
						</view>
						<view class="fontStyle">
							{{item.create_time}}
							<span>￥{{item.primary_price}}</span>
						</view>
					</view>
					<view class="fL_orderBottom">
						优惠价格
						<p class="fontStyle">￥{{item.price}}</p>
					</view>
				</view>
				<!-- 预计金额 -->
				<view class="fL_price">
					<!-- <view class="fL_priceLeft" v-if="btnIndex==4">
						<image src="../../../static/guide/联系.png" mode=""></image>
						联系导购
					</view> -->
					<view class="fL_priceRight">
						预计佣金 <span>¥ {{item.profit}}</span>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="lastText">
			{{loadingText}}
		</view> -->
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue'
	import service_mall from '@/service/mall.js'
	export default{
		data(){
			return{
				listBtn:['所有','未付款','已付款','未成交'],//按钮列表
				btnIndex:0,
				finishList:[],
				page:1,
				pagesize:10,
				loadingText:'加载更多'
			}
		},
		components:{
			navBar
		},
		onLoad(options) {
			this.getFinishList()
		},
		onReachBottom(){
			let that = this
			setTimeout(function(){
				that.toReachBottom()
			},1000)
		},
		methods:{
			// 获取清单列表
			getFinishList(){
				uni.showLoading({
					title:'加载中...'
				})
				let pay_status = this.btnIndex==0?'all':this.btnIndex==1?'1':this.btnIndex==2?'2':this.btnIndex==3?'3':'';
				service_mall.getAllList({pay_status,page:this.page,pagesize:this.pagesize}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.finishList = res.data.data?res.data.data:[]
					}
				})
				setTimeout(function () {
				    uni.hideLoading();
				}, 500);
			},
			
			// 下拉加载
			toReachBottom(){
				this.page++
				uni.showLoading({
					title:'加载中...'
				})
				let pay_status = this.btnIndex==0?'all':this.btnIndex==1?'1':this.btnIndex==2?'2':this.btnIndex==3?'3':'';
				service_mall.getAllList({pay_status,page:this.page,pagesize:this.pagesize}).then(res=>{
						console.log(res)
					if(res.code==1){
						if(!res.data.data.length){
							uni.showToast({
								title:'没有更多了',
								icon:'none'
							})
							this.loadingText = '没有更多了'
							return false
						}
						this.finishList = this.finishList.concat(res.data.data)
					}
				})
				setTimeout(function(){
					uni.hideLoading()
				},500)
			},
			
			//点击头部按钮
			_navBtn(e){
				this.page = 1
				console.log(e)
				this.btnIndex = e.currentTarget.dataset.index
				this.getFinishList()
			},
			toGuideList(single_id){
				uni.navigateTo({
					url:`../guideList/guideList?single_id=${single_id}`
				})
			},
			
			//点击查看订单
			_toViewOrder(){
				uni.navigateTo({
					url:"../viewOrder/viewOrder"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.finishList{
		.fL_topImg{width: 100%;height: 296rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		.fL_listBtn{
			padding: 46rpx 40rpx 46rpx 54rpx;
			display: flex;
			position: relative;
			justify-content: space-between;
			color: #fff;
			font: 500 28rpx/40rpx PingFang SC;
			.fL_allBtn{
				display: flex;
				flex-direction: column;
				align-items: center;
				opacity: 0.4;
			}
			.fL_listBtnborder{
				width: 56rpx;
				height: 0;
				border: 2rpx solid #fff;
				margin-top: 28rpx;
				border-radius: 4rpx;
			}
			.activeBtn{
				display: flex;
				flex-direction: column;
				align-items: center;
				opacity: 1;
			}
		}
		
		//所有列表
		.fL_allList{
			width: 100%;
			margin-top: 40rpx;
			.fL_ListItem{
				width: 702rpx;
				height: 510rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin: 0 auto 24rpx;
				padding: 40rpx 28rpx 28rpx 24rpx;
				.fL_userInfo{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.fL_userLeft{
						display: flex;
						align-items: center;
						font: 500 26rpx/40rpx PingFang SC;
						color: #0A0605;
						.fL_userImg{
							margin-right: 20rpx;
							position: relative;
							image{width: 84rpx;height: 84rpx;}
							image:nth-child(2){position: absolute; bottom: 0;right: 0;  width: 28rpx;height: 28rpx;}
						}
						
					}
					span{
						font: 400 22rpx/36rpx PingFang SC;
						color: #DBA954;
					}
				}
				.fL_orderInfo{
					width: 654rpx;
					height: 248rpx;
					background-color: #F8F8F8;
					margin: 28rpx 0 40rpx 0;
					padding: 28rpx;
					font: 400 22rpx/36rpx PingFang SC;
					color: #A0A0A0;
					display: flex;
					text-align: right;
					flex-direction: column;
					justify-content: space-between;
					.fontStyle{font: 400 26rpx/40rpx PingFang SC;color: #505050;}
					.fL_orderTop{
						view{display: flex;justify-content: space-between;}
					}
					.fL_orderBottom{margin-left: auto;}
				}
				.fL_price{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.fL_priceLeft{
						width: 184rpx;
						height: 64rpx;
						border: 2rpx solid #505050;
						border-radius: 32rpx;
						display: flex;
						align-items: center;
						
						font: 400 26rpx/40rpx PingFang SC;
						color: #505050;
						image{
							width: 32rpx;
							height: 32rpx;
							margin: 0 12rpx;
						}
					}
					.fL_priceRight{
						margin-left: auto;
						font: 400 22rpx/36rpx PingFang SC;
						color: #0A0605;
						span{ margin-left: 16rpx; font: 500 30rpx/36rpx PingFang SC;color: #FA4E37;}
					}
				}
			}
		}
		
		// 已成交
		.fL_dealOk{
			width: 100%;
			margin-top: 40rpx;
			.fL_dealOkItem{
				width: 686rpx;
				height: 278rpx;
				padding:  28rpx 0;
				background-color: #fff;
				margin: 0 auto 24rpx;
				border-radius: 16rpx;
				.fL_dealTop{
					display: flex;
					padding: 0 28rpx 28rpx 28rpx;
					justify-content: space-between;
					align-items: center;
					font: 600 26rpx/36rpx PingFang SC;
					border-bottom: 2rpx solid #F5F5F5;
					.fL_dealTopLeft{
						display: flex;
						align-items: center;
						color: #0A0605;
						image{margin-right:16rpx;width: 40rpx;height: 40rpx;border-radius: 50%;}
						span{color: #DBA954;}
					}
					.fL_dealTopRight{
						display: flex;
						align-items: center;
						font-weight: 500;
						color: #A0A0A0;
						image{margin-right:8rpx;width: 24rpx;height: 24rpx;}
					}
				}
				.fL_dealBottom{
						padding: 34rpx 24rpx 28rpx;
					.fL_dealBottomInfo{
						display: flex;
						justify-content: space-between;
						.fL_dealInfoImg{
							display: flex;
							// align-items: center;
							font: 500 24rpx/36rpx PingFang SC;
							color: #A0A0A0;
							image{width: 70rpx;height: 70rpx;margin-right: 14rpx;}
							view{
								span{font: 600 26rpx/40rpx PingFang SC;color: #0A0605;}
								p{margin: 6rpx 0;}
								.fL_dealAllPrice{
									span{color: #FA4E37;}
								}
							}
						}
						.fL_dealInfoPrice{
							width: 128rpx;
							height: 82rpx;
							background-color: #F8F8F8;
							border-radius: 8rpx;
							text-align: center;
							font: 600 26rpx/40rpx PingFang SC;
							color: #FA4E37;
							p{font: 500 24rpx/36rpx PingFang SC;color: #A0A0A0;}
						}
					}
				}
			}
		}
		
		.lastText{
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			font-family: PingFang SC;
			text-align: center;
		}
		// 未成交
		
	}
</style>
